<template>
    <div class="letter">
        <ul>
            <li 
                class="item" 
                v-for="item of letters"
                :key="item"
                :ref="item"
                @click="handlLetterClick"
                @touchstart="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd"
            >
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
export default{
    name:"Letter",
    props : {
        cities:Object
    },
    data(){
        return {
            flag:false,
            startY:'',
        }
    },
    computed:{
        letters (){
            const letter = [];
            for(let i in this.cities){
                letter.push(i)
            }
            return letter;
        }
    },
    methods:{
        handlLetterClick(e){
            this.$emit('change',e.target.innerText)
        },
        handleTouchStart(){
            this.flag = true;
        },
        handleTouchMove(e){
            if(this.flag){
                this.startY = this.$refs['A'][0].offsetTop
                const touchY = e.touches[0].clientY - 80
                const index = Math.floor((touchY - this.startY) / 20)
                if (index >= 0 && index < this.letters.length) {
                    this.$emit('change', this.letters[index])
                }
            }
        },
        handleTouchEnd(){
            this.flag = false;
        }
    }
}
</script>

<style scoped lang="less">
.letter{
    display: flex;
    flex-direction: column;
    width: .4rem;
    position: fixed;
    right: .1rem;
    top: 2rem;
    z-index: 1;
    .item{
        line-height: .4rem;
        text-align: center;
        color: #000;
        font-size: .26rem;
    }
}
</style>